<template>
  <div class="comment-item" v-if="comment">
    <header class="user">
      <UserHead
        :userId="comment.userId"
        :width="'0.38rem'"
        :img="comment?.avatar"
      />
      <div class="midle">
        <div class="au">
          <span class="name">{{ comment.nickName }}</span
          ><span class="lvl">lv{{ comment.userLevel }}</span>
        </div>
        <div class="time">
          <van-rate
            v-if="comment.grade"
            disabled
            size="0.1rem"
            disabled-color="var(--bgc-yellow)"
            class="rate"
            :value="comment.grade"
            allow-half
            void-icon="star"
            void-color="#eee"
          />
          <div>{{ time }}</div>
        </div>
      </div>
      <div class="right">
        <span>{{ comment.likes }}</span>
        <van-icon name="thumb-circle-o" />
      </div>
    </header>
    <div class="comment-content">
      <div>{{ comment.comment }}</div>
      <div v-if="comment?.select">
        <span>#精彩书摘#</span>{{ comment.select.replace("#精彩书摘#", "") }}
      </div>
      <div class="reply" v-if="comment?.replyList?.length">
        <div v-for="(reply, index) in comment?.replyList" :key="index">
          <span class="name">{{ reply.nickName }}</span
          > 回复 <span class="name">{{ reply.toNickName }}: </span>
          <span>{{ reply.comment }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UserHead from "@/components/user/UserHead.vue";
export default {
  props: ["comment"],
  components: {
    UserHead,
  },
  computed: {
    time() {
      let time = new Date(this.comment.time);
      return `${time.getFullYear()}年${
        time.getMonth() + 1
      }月${time.getDate()}日`;
    },
  },
  created() {
    console.log(this.comment);
  },
};
</script>

<style lang="scss" scoped>
.comment-item {
  width: 100%;
  .user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.12rem;
    .midle {
      flex-grow: 1;
      margin-left: 0.1rem;
      .au {
        .name {
          font-size: 0.14rem;
          color: var(--text-blue);
        }
        .lvl {
          font-size: 0.12rem;
          color: var(--text-red);
          margin-left: 0.05rem;
        }
      }
      .time {
        font-size: 0.12rem;
        color: var(--text-gray);
        display: flex;
        align-items: center;
        .rate {
          margin-right: 0.1rem;
        }
      }
    }
    .right {
      display: flex;
      align-items: center;
      font-size: 0.18rem;
      > span {
        font-size: 0.12rem;
        margin-right: 0.05rem;
      }
    }
  }
  .comment-content {
    width: 100%;
    font-size: 0.14rem;
    box-sizing: border-box;
    padding-left: 0.48rem;
    > div {
      margin: 0.1rem 0;
      > span {
        display: inline-block;
        color: var(--text-red);
        color: var(--text-yellow2);
        background-color: var(--bgc-yellow3);
        padding: 0.02rem 0.04rem;
        border-radius: 0.02rem;
        margin-right: 0.05rem;
      }
    }
    .reply {
      width: 100%;
      box-sizing: border-box;
      padding:0.02rem 0.04rem;
      border-radius: 0.04rem;
      background-color: var(--bgc-gray);
      >div{
        margin: 0.05rem 0;
      }
      .name{
        color: var(--text-gray);
      }
    }
  }
}
</style>